<template>
  <section class="component assign-role">
    <data-box :data="dataSet" :selectionList.sync="selectionList" ref="data-box">
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column prop="roleName" label="角色名称" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="remark" label="角色描述" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>
    <el-row type="flex" justify="center" style="margin-top:20px">
      <el-button @click="close()">取消</el-button>
      <el-button @click="confirmClick()">确定</el-button>
    </el-row>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { Prop } from 'vue-property-decorator'
import DataForm from '~/components/common/data-form.vue'
import DataBox from '~/components/common/data-box.vue'
import { UserService } from '~/service/service-manage/user.service'

@Component({
  components: {
    DataForm,
    DataBox
  }
})
export default class AssignRole extends Vue {
  @Dependencies(UserService)
  private userService: UserService

  @Prop({
    type: String,
    required: true
  }) userId: string

  // 数据列
  private dataSet: Array<any> = [];
  private selectionList: Array<any> = [];


  /**
   * 刷新数据
   */
  private refreshData() {
    this.userService.findAssignRoleList(this.userId).subscribe(
      data => {
        this.dataSet = data
        let target: Array<any> = []
        data.map(e => {
          if (e.selected) {
            target.push(e)
          }
        })
        this.selectionList = target
      },
      ({ msg }) => this.$message.error(msg)
    )
  }

  /**
   * 确定点击事件
   */
  private confirmClick() {
    if (this.selectionList.length === 0) {
      this.$message.error('请选择角色')
      return
    }
    let assignModel: any = {
      userId: this.userId,
      roleIds: this.selectionList.map(e => e.id)
    }
    this.userService.assignRoleToUser(assignModel).subscribe(
      data => {
        this.close()
        this.$message.success('分配成功')
      },
      ({ msg }) => this.$message.error(msg)
    )
  }

  /**
   * 取消
   */
  private close() {
    this.$emit('close')
  }
}
</script>
